<%--
  Created by IntelliJ IDEA.
  User: 86131
  Date: 2023/9/28
  Time: 13:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/>
</head>
<body>
<div class="wrap-container email-wrap clearfix">
    <div class="row">
        <div class="email-edge col-lg-2">
            <button class="layui-btn layui-btn-normal email-write-btn" id="write-email-btn">写信</button>
            <dl class="email-folder">
                <dt>文件夹</dt>
                <dd>
                    <a href="javascript:;" data-url="email-list.jsp"><i class="iconfont">&#xe639;</i>收件箱<button class="layui-btn  layui-btn-danger layui-btn-mini f-r">12</button></a>
                </dd>
                <dd>
                    <a href="javascript:;" data-url="email-list.jsp"><i class="iconfont">&#xe603;</i>发信</a>
                </dd>
                <dd>
                    <a href="javascript:;" data-url="email-list.jsp"><i class="iconfont">&#xe602;</i>草稿<button class="layui-btn layui-btn-warm layui-btn-mini f-r">2</button></a>
                </dd>
                <dd>
                    <a href="javascript:;" data-url="email-list.jsp"><i class="layui-icon">&#xe640;</i>垃圾箱</a>
                </dd>
            </dl>
            <dl class="email-classify">
                <dt>分类</dt>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-blue">&#xe617;</i>工作</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-green">&#xe617;</i>文档</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-wran">&#xe617;</i>社交</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-red">&#xe617;</i>广告</a>
                </dd>
                <dd>
                    <a href="javascript:;"><i class="layui-icon icon-gray">&#xe617;</i>客户端</a>
                </dd>
            </dl>
            <dl class="email-label">
                <dt>标签</dt>
                <dd>
                    <button class="layui-btn layui-btn-primary layui-btn-small">朋友</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">工作</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">孩子</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">关系</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">家庭</button>
                    <button class="layui-btn layui-btn-primary layui-btn-small">电影</button>
                </dd>

            </dl>
        </div>
        <div class="col-lg-10">
            <div class="email-content">
                <div class="email-content-title layui-form">
                    <span class="write-title">收件箱 (16)</span>
                </div>
                <div class="email-tool-btn clearfix">
                    <div class="col-lg-6 email-tool-btn-left">
                        <button class="layui-btn layui-btn-small layui-btn-primary" id='email-refresh-btn' data-title='刷新'>
                            <i class="layui-icon">&#x1002;</i>
                        </button>
                        <button class="layui-btn layui-btn-small layui-btn-primary" id="email-read-btn" data-title='已读'>
                            <i class="layui-icon">&#x1002;</i>
                        </button>
                        <button class="layui-btn layui-btn-small layui-btn-primary" id='email-important-btn' data-title='重要'>
                            <i class="layui-icon">&#xe600;</i>
                        </button>
                        <button class="layui-btn layui-btn-small layui-btn-primary" id='email-del-btn' data-title='删除'>
                            <i class="layui-icon">&#xe640;</i>
                        </button>
                    </div>
                    <div class="col-lg-6 email-tool-btn-right">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <input type="text" name="title" required lay-verify="required" placeholder="搜索邮件标题" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layui-btn-normal search-btn">搜索</button>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-form email-list">
                    <table class="layui-table" lay-even lay-skin="nob">
                        <colgroup>
                            <col width="50">
                            <col width="200">
                            <col>
                            <col class="hidden-xs" width="150">
                        </colgroup>
                        <thead>
                        <tr>
                            <th><input type="checkbox" name="" lay-skin="primary" lay-filter="emailAllChoose"></th>
                            <th class="hidden-xs">来源</th>
                            <th>名称</th>
                            <th class="hidden-xs">创建时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">淘宝网</td>
                            <td><a href="javascript:;">史上最全！淘宝双11红包疯抢攻略！</a></td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">淘宝网</td>
                            <td>亲，双11来啦！帮你挑货，还送你4999元红包！仅此一次！</td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">Amaze UI</td>
                            <td>Amaze UI Beta2 发布</td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">玩具</td>
                            <td>历史邮件</td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">玩具</td>
                            <td>历史邮件</td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">玩具</td>
                            <td>历史邮件</td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">玩具</td>
                            <td>历史邮件</td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">玩具</td>
                            <td>历史邮件</td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">玩具</td>
                            <td>历史邮件</td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" name="" lay-skin="primary"></td>
                            <td class="hidden-xs">玩具</td>
                            <td>历史邮件</td>
                            <td class="hidden-xs">1989-10-14</td>
                        </tr>
                        </tbody>
                    </table>
                    <div id="email-page" style="text-align: center;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['form', 'laypage', 'jquery','layer'], function() {
        var form = layui.form(),
            layer = layui.layer,
            laypage = layui.laypage,
            $ = layui.jquery;
        //获取当前iframe的name值
        var iframeObj = $(window.frameElement).attr('name');

        $('#write-email-btn').on('click',function(){
            parent.page("写邮件", 'email-write.jsp', iframeObj, w = "700px", h = "600px");
        })
        //列表
        $('.email-folder').on('click','a',function(){
            var url=$(this).attr('data-url');
            $('#iframeEmail').attr('src',url);

        })
        $('.email-tool-btn .f-l').on('mouseenter','button',function(){
            var title=$(this).attr('data-title');
            var id='#'+$(this).attr('id');
            layer.tips(title, id, {
                tips: [1, '#444c63'],
                time: 1000
            });
        })
        //分页
        laypage({
            cont: 'email-page'
            ,pages: 10
            ,skin: '#1E9FFF'
        });
        form.on('checkbox(emailAllChoose)', function(data) {
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function(index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        form.render();
        //非手机端，设置高度
        if(window.innerWidth>=768){
            $('.email-content').css('height',window.innerHeight-30);
        }
        $(window).resize(function(){
            $('.email-content').css('height',window.innerHeight-30);
        })
    });
</script>
</body>
</html>
